<template>
	<view class="content">
		<view class="register_box">
			<view class="input_box">
				<view class="item">
					<view class="wz"> 旧密码</view>
					<view class="input_con">
						<view class="input" @tap="TapISoldPwd()">
							<setPassword :isYan='ISold_pwd' :IsUpset="false" :show="IsOldKeyboard" @finish="TapISoldPwd" :styles='styles'
								placeholder="请输入旧密码" @change="old_keys" />
						</view>
						<view class="yan" @tap="ISold_pwd = !ISold_pwd">
							<image v-if="ISold_pwd" src="/static/xiong-img/index_yan1.png" mode=""></image>
							<image v-else src="/static/xiong-img/index_yan2.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="wz"> 新密码 </view>
					<view class="input_con">
						<view class="input" @tap="TapISnewPwd1()">
							<setPassword :show="IsNewKeyboard1" :IsUpset="false" :isYan='ISnew_pwd1' placeholder="请输入新密码" :styles='styles'
								@finish="TapISnewPwd1" @change="new_keys1" />
						</view>
						<view class="yan" @tap="ISnew_pwd1 = !ISnew_pwd1">
							<image v-if="ISnew_pwd1" src="/static/xiong-img/index_yan1.png" mode=""></image>
							<image v-else src="/static/xiong-img/index_yan2.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="wz"> 确认新密码 </view>
					<view class="input_con">
						<view class="input" @tap="TapISnewPwd2()">
							<setPassword :show="IsNewKeyboard2" :IsUpset="false" :isYan='ISnew_pwd2' placeholder="请输入新密码" :styles='styles'
								@finish="TapISnewPwd2" @change="new_keys2" />
						</view>
						<view class="yan" @tap="ISnew_pwd2 = !ISnew_pwd2">
							<image v-if="ISnew_pwd2" src="/static/xiong-img/index_yan1.png" mode=""></image>
							<image v-else src="/static/xiong-img/index_yan2.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="btn_box">
			<view class="jiaoyisuo_btn1" @tap="to_submit">
				确认修改
			</view>
		</view>
	</view>
</template>

<script setup>
	import setPassword from '../../components/xiong-setPassword/index.vue';
	import {
		ref
	} from 'vue';
	components: {
		setPassword
	};

	const ISold_pwd = ref(false);//原始密码显示
	const ISnew_pwd1 = ref(false); //新密码1显示
	const ISnew_pwd2 = ref(false); //确认新密码2显示
	const IsOldKeyboard = ref(false);//是否显示原始密码输入框 
	const IsNewKeyboard1 = ref(false);//是否显示新密码输入框 
	const IsNewKeyboard2 = ref(false);//是否显示确认新密码输入框 
	const old_pwd1 = ref(''); //原始密码
	const new_pwd1 = ref(''); //新密码1
	const new_pwd2 = ref(''); //确认新密码2
	const styles = ref('justify-content: flex-end;');//样式因为需要他
	
	const to_submit = ()=> {
		if (!old_pwd1.value.trim().toString() || !new_pwd1.value.trim().toString() || !new_pwd2.value.trim().toString()) return showToastS('请输入密码');
		if (new_pwd1.value.trim().toString() != new_pwd2.value.trim().toString()) return showToastS('两次新密码输入不一致');
	};//确认修改

	const TapISoldPwd = ()=> { //原始密码输入完成事件
		IsOldKeyboard.value = !IsOldKeyboard.value
		IsNewKeyboard1.value = false
		IsNewKeyboard2.value = false
	};
	
	const TapISnewPwd1 = ()=> { //新密码输入完成事件
		IsOldKeyboard.value = false
		IsNewKeyboard1.value = !IsNewKeyboard1.value
		IsNewKeyboard2.value = false
	};
	
	const TapISnewPwd2 = ()=> { //确认新密码输入完成事件
		IsOldKeyboard.value = false
		IsNewKeyboard1.value = false
		IsNewKeyboard2.value = !IsNewKeyboard2.value
	};
	
	const old_keys = (ev)=> { //获取的旧密码的值
		old_pwd1.value = ev
	};
		
	const new_keys1 = (ev)=> { //获取的新密码的值
		new_pwd1.value = ev
	};
	
	const new_keys2 = (ev)=> { //获取的确认新密码的值
		new_pwd2.value = ev
	};
	
	//简单封装的弹窗提示
	const showToastS = (title)=> {
		uni.showToast({
			icon: 'none',
			title
		})
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F6FB;
		width: 100%;

		box-sizing: border-box;
	}

	.jiaoyisuo_btn1 {
		width: 90%;
		margin: 0 auto;
		padding: 8px 0;
		box-sizing: border-box;
		background: #19BE6B;
		box-shadow: 0px 8rpx 22rpx 1px rgba(8, 75, 215, 0.32);
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}

	.register_box {
		width: 100%;
		background-color: #FFFFFF;
		padding: 0 20rpx;
		box-sizing: border-box;

		.input_box {
			margin-top: 30rpx;
			width: 100%;

			.item {
				height: 120rpx;
				display: flex;
				align-items: center;
				width: 100%;
				padding: 20rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #f4f4f4;

				font-size: 30rpx;
				font-family: PingFang SC;

				&:last-child {
					border-bottom: none;
				}


				.wz {
					font-weight: bold;
					width: 180rpx;
					color: #37416B;
				}

				.input_con {

					width: calc(100% - 180rpx);
					display: flex;
					align-items: center;

					.input {
						width: calc(100% - 70rpx);
						text-align: right;
					}

					.yan {
						width: 70rpx;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						height: 34rpx;

						image {
							width: 44rpx;
							height: 34rpx;
						}
					}
				}

			}


		}
	}


	.Tips_box {
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
		display: flex;

		.left {
			width: 40rpx;

			image {
				width: 40rpx;
			}
		}

		.right {
			display: flex;
			padding-left: 20rpx;
			box-sizing: border-box;

			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #A5ABC3;
			flex-direction: column;

			text {
				margin-bottom: 20rpx;
			}
		}
	}

	.btn_box {
		margin-top: 80rpx;
	}
</style>
